<template>
  <div :style="styleSheet">
    <slot></slot>
  </div>
</template>

<script>
export default {
  props:{
    styles:{
      type:Object,
      default(){
       return{
         overflow:"hidden"
       }
      }
    }
  },
  computed:{
    activeHeight:function(){
      var docELement = document.documentElement;
      var clientHeight = docELement.clientHeight;
      var clientWidth = docELement.clientWidth;
      if (!clientWidth) return;
      var fontSize = 20 * (clientWidth / 320);

      if(this.$route.meta.isShowNav){
        clientHeight-=3.2*fontSize;
      }

      if(this.$route.meta.isShowTab){
        clientHeight-=3.2*fontSize;
      }
      return  clientHeight/fontSize+'rem';
    },
    styleSheet:function(){
      return {
        marginTop:this.$route.meta.isShowNav?'3.2rem':'0px',
        marginBottom:this.$route.meta.isShowTab?'3.2rem':'0px',
        border:'1px solid red',
        height:this.activeHeight,
        width:"100%",
        ...this.styles
      }
    }
  }
}
</script>